<template>
    <div class="allbox">
        <!--头部导航条-->
        <div class="nav">
            <div  style="margin-left: 163px;">
                <ul v-if="userTel==null" class="navul">
                    <li>
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li><a class="mylogingo" @click="goLogin">登录</a>&nbsp;/&nbsp;<a @click="gozce">注册</a></li>
                    <li>退出</li>
                </ul>
                <ul v-else class="navul">
                    <li>
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li>欢迎你：{{this.userTel}}</li>
                    <li @click="tuichu">退出</li>
                </ul>
            </div>
            <div style="float: right;">
                <ul class="navultow">
                    <li @click="gomycenter" class="mycb1"><a class="myxb">我的闲呗</a>
                        <div class="hen"></div>
                        <ul class="second">
                            <li><a class="second1">我已买到的宝贝</a></li>
                            <li class="second1">我已卖出的宝贝</li>
                        </ul>
                    </li>
                    <li >
                       <div @click="publish">发布商品</div> <div class="hen"></div>
                    </li>
                    <li @click="jumpPaimai()"><div class="hen"></div>
                        去拍卖
                    </li>
                    <li @click="gocustomerchat()" >联系客服<div class="hen"></div>
                    </li>
                </ul>
            </div>
        </div>
    <div style="background-color: white;margin-bottom: 20px;">
        <!-- logo搜索区 -->
        <div class="headlogo">
            <div class="headinner">
                <div class="titlebox">
                    <div><img src="http://112.74.185.144:8000/files/Zqm1666747516.jpg" ></div>
                    <div class="miaosu"><i class="el-icon-circle-check"></i>100%正品</div>
                    <div class="miaosu"><i class="el-icon-circle-check"></i>退换无忧</div>
                    <div class="miaosu"><i class="el-icon-circle-check"></i>安全可靠</div>
                    <div class="miaosu2">
                        <input  type="text" name="" class="miaosutext input1" v-model="inputValue">
                        <button class="miaosubutton input1" @click="goseach"><i class="el-icon-search" ></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- 分类 -->
        <div class="fenleibox">
            <div class="fenleiindex1 classlor">商品分类</div>
            <div class="fenleiindex">电器</div>
            <div class="fenleiindex">服装</div>
            <div class="fenleiindex">奢侈品</div>
            <div class="fenleiindex">车类</div>
            <div class="fenleiindex">玩具</div>
            <div class="fenleiindex">户外运动</div>
            <div class="fenleiindex">家装</div>
            <div class="fenleiindex">宠物</div>
            <div class="fenleiindex">游戏</div>
            <div class="fenleiindex">图书</div>
            <div class="fenleiindex">建材</div>
        </div>
        
        <!-- 轮播图 -->
        <div class="fenleilbbox">
            <div class="allfenleibox jiange">
                <h3>分类</h3>
                <ul>
                    <li>
                        <div class="fenxqing"><i class="el-icon-monitor"></i></div>
                        <div @click="gofenlei(1)" class="fenxqing hove1">电器</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(2)" class="fenxqing hove1">数码</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(6)" class="fenxqing hove1">家装</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(7)" class="fenxqing hove1">玩具</div>
                    </li>
                    <li>
                        <div class="fenxqing"><i class="el-icon-goods"></i></div>
                        <div @click="gofenlei(3)" class="fenxqing hove1">服装</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(4)" class="fenxqing hove1">奢侈品</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(9)" class="fenxqing hove1">运动户外</div>
                    </li>
                    <li>
                        <div class="fenxqing"><i class="el-icon-tickets"></i></div>
                        <div @click="gofenlei(11)" class="fenxqing hove1">游戏</div> 
                        <div  class="fenxqing">/</div>
                        <div @click="gofenlei(12)" class="fenxqing hove1">图书</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(14)" class="fenxqing hove1">百货</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(10)" class="fenxqing hove1">宠物</div>
                    </li>
                    <li>
                        <div class="fenxqing"><i class="el-icon-office-building"></i></div>
                        <div @click="gofenlei(8)" class="fenxqing hove1">房产</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(5)" class="fenxqing hove1">车类</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(13)" class="fenxqing hove1">建材</div>

                    </li>
                </ul>
            </div>
            <div class="lunbobox jiange">
                <div class="rightfenleibox">
                    <ul>
                        <li @click="jumpPaimai()">闲呗拍卖</li>
                        <li @click="goActivitypage">活动专区</li>
                        <li>闲呗直播</li>
                    </ul>
                </div>
                <el-carousel  height="360px">
                    <el-carousel-item v-for="(item,lunboindex) in carouseData" :key="lunboindex">
                        <img @click="adver(item)" :src="item.img" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <!-- 侧边导航栏 -->
        <div class="rightbox">
            <div @click="gomycenter" class="navleft"><i class="el-icon-user-solid"></i><br>个人中心</div>
            <div @click="gomycenter" class="navleft"><i class="el-icon-pie-chart" ></i><br>我的足迹</div>
            <div class="navleft"><i class="el-icon-upload2"></i><br><a href="javascript:window.scrollTo(0,0)">回到顶部</a></div>
        </div>

        <!-- <div class="imgbox" >
            <img src="../static/imgs/huodong1.webp" alt="">
        </div> -->
        <!-- 右侧固定定位导航 -->
	<div id="tool">
		<span class="inonfont"></span>
		<div class="btn">
			<a href="javaScript:0" class="c4 active">爱逛 好货</a>
			<a @click="goActivitypage" href="javaScript:0" class="c5">活动 专区</a>
			<a href="javaScript:0" class="c7">实惠 特卖</a>
			<a href="javaScript:0" class="c4">猜你 喜欢</a>
			<a href="javascript:window.scrollTo(0,0)" class="">顶部</a>
		</div>
	</div>
    <!-- 活动块 -->
        <div class="tuijianbox">
            <div class="headertjpc">
                <div class="headertjtitle">
                    <img src="https://a.vpimg2.com/upload/flow/2018/08/17/154/15344789862278.jpg" alt="">
                </div>
            </div>
            <div class="huodongtitle">
                闲呗快抢<a>·天天低价</a>
                <a>美好生活抢先到>></a>
            </div>
            <!-- 活动必看商品块 -->
            <div class="huodongbox">
                    <div @click="goActivitypage" class="huodongleftbox">
                        <span>活动专区</span> 
                    </div>
                    <div @click="jumpPaimai()" class="huodongrightbox">
                        <span>拍卖专区</span> 
                    </div>
            </div>
        </div>
    <!-- 推荐新品区 -->
    <div class="tuijianbox">
        <div class="headertjpc">
            <div class="headertjtitle">——猜你喜欢——</div>
        </div>
        <!-- 推荐商品块 -->
        <div class="left4" >
                <div @click="goxqing(item)" v-for="(item,adIndex) in nowarr" :key=adIndex >
                    <img :src="item.commodityImg" alt="">
                    <div style="display:flex;justify-content: space-between; align-items: center;  margin-top:10px">
                        <span style="font-size:20px;color:red">￥{{item.currentPrice}}    <span style="font-size: 12px; text-decoration:line-through;margin-left: 10px;color:gray">{{item.originalPrice}}</span><el-tag type="danger" size="medium">包邮</el-tag></span>  <span style="font-size:17px;">{{item.people}}</span>
                    </div>
                    <div style="margin-top:15px;font-weight:bold;height: 39px; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{item.commodityName}}</div>

                    <div style="display:flex;justify-content: space-around; align-items: center;  margin-top:20px">
                        <span style="color:gold"><i class="el-icon-star-off"></i>{{item.seller}}</span>  <span style="color:cornflowerblue;">{{item.address}}</span>
                    </div>
                </div>
        </div>
    </div>
    <!-- 分页组件 -->
    <div class="feneybox" style="margin-top:30px">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pagesize"
            layout="prev, pager, next"
            :total="alltotal">
        </el-pagination>
    </div>
    <hr>
    <div class="endxx">
      <div class="endwz">
        <ul>
          <li>购物指南</li>
          <li>免费注册</li>
          <li>开通支付宝</li>
          <li>支付宝充值</li>
          <li>备案/许可证编号为:闽ICP备2022015449号</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>闲呗保障</li>
          <li>发票保障</li>
          <li>售后规则</li>
          <li>物流时效保障</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>支付方式</li>
          <li>快捷支付</li>
          <li>信用卡</li>
          <li>余额宝</li>
          <li>蚂蚁花呗</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>商家服务</li>
          <li>闲呗规则</li>
          <li>商家入驻</li>
          <li>商家中心</li>
          <li>闲呗必修课</li>
          <li>喵言喵语</li>
          <li>平台服务协议</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>手机闲呗</li>
          <li><img src="../assets/ewm.png" style="width: 90px" /></li>
        </ul>
      </div>
    </div>
</div>
</template>

<script>
    export default{
        data(){
            return{
                browsinglist:[],
                brow1:'',
                brow2:'',
                userTel:sessionStorage.getItem('userTel'),
                inputValue:"",  //输入框的值
                alltotal:0,     //总条数
                pageNum:1,         //当前页
                pagesize:12,         //一页大小
                nowarr:[],          //获取到的商品内容
                carouseData:[       //轮播图
                    {url:require("../static/imgs/lunbo1.jpg")},
                    {url:require("../static/imgs/lunbo2.png")},
                    {url:require("../static/imgs/lunbo3.jpg")},
                    {url:require("../static/imgs/lunbo4.png")},
                ],
                productArr:[
               
            ],
            huodonglist:[
            
            ],
            }
        },
        mounted(){   
            
            if(this.userTel!=null){
                this.selectbrowsing()
            }else{
                // this.selectshopp()
                this.comprehensiveranking()
            }
            this.selectadver()  //广告
        },
        
        methods: {
            //前往登录
            goLogin(){
                this.$router.push({name:'Login'})
            },
            // 当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;  //当前页数
                // this.selectshopp()
                if(this.userTel!=null){
                this.selectbrowsing()
            }else{
                this.comprehensiveranking()
            }
            },
            //广告
            adver(id){
                console.log(id,263)
                localStorage.setItem("hx220408commodityId",id.commodityId)
                localStorage.setItem("hx220408userTel",id.userTel)
                this.$router.push({
                    name:'goods'
                })
                console.log(id,280);
            },
            //查询浏览记录
            selectbrowsing(){
                this.$axios({
                    url:'/api/userselectbrowing/get',
                    method:'get',
                    params:{
                        tel:sessionStorage.getItem('userTel'),
                    },
                })
                .then(resp=>{
                    console.log(resp,321);
                    if(resp.data.data.length!=0){
                        this.brow1=resp.data.data[0].categoryId
                    }else if(resp.data.data.length>=2){
                        this.brow2=resp.data.data[1].categoryId
                    }
                    console.log(this.brow1,319)
                    console.log(this.brow2,320)
                    this.selectshopp()  //分页的方法
                })
                .catch(err=>{
                    console.log(err);
                })
            },
            // 商品信誉排序
            comprehensiveranking(){
                this.$axios({
                    url:'/api/getRozonhexu/get',
                    method:'get',
                    params:{
                        start:(this.pageNum-1)*this.pagesize,
                        size:this.pagesize,
                    },
                })
                .then(resp=>{
                    console.log(resp.data)
                    this.nowarr=resp.data.data
                    console.log(this.nowarr)
                    this.alltotal = resp.data.num
                })
                .catch(err=>{
                    console.log(err.data)
                })
            },
            // 查询广告表
            selectadver(){
                this.$axios({
                    url:'/api/allgetadver/get',
                    method:'get',
                    params:{},
                })
                .then(resp=>{
                    console.log(resp,285)
                    this.carouseData = resp.data.data
                    console.log(this.carouseData,288)
                })
                .catch(err=>{
                    console.log(err);
                })
            },
            //将商品分页查询出来
            selectshopp(){
                this.$axios({
                    url:'/api/commodityTable/get',
                    method:'get',
                    params:{
                        brow1:this.brow1,
                        brow2:this.brow2,
                        start:(this.pageNum-1)*this.pagesize,
                        size:this.pagesize,
                    },
                })
                .then(resp=>{
                    console.log(resp.data)
                    this.nowarr=resp.data.data
                    console.log(this.nowarr)
                    this.alltotal = resp.data.num
                    console.log("总条数",this.alltotal)
                })
                .catch(err=>{
                    console.log(err.data)
                })
            },
            //跳转活动专区页面
            goActivitypage(){
                this.$router.push({name:'ActivityPage'})    
            },
            // 分类跳转详情页
            gofenlei(id){
                console.log(id,303)
                localStorage.setItem('shopptypyid',id)
                this.$router.push({
                    name:'search',
                })
            },
            //跳转详情页并传点击的商品的数据
            goxqing(item){                     
                console.log(item,'点击的商品块',312)
                localStorage.setItem("hx220408commodityId",item.commodityId)
                localStorage.setItem("hx220408userTel",item.userTel)
                this.$router.push({name:'goods',
                params:{
                    id:item
                }
            })
            // let routeUrl = this.$router.resolve({
            //     path: '/goods'// 这里的路径就可以正常的写，不需要添加_blank: true
            // })
            // window.open(routeUrl.href, '_blank')
         },
         //到搜索页
         goseach(){
            localStorage.setItem("hx220408inputValue",this.inputValue)
            this.$router.push("search")
         },
         //到个人中心
         gomycenter(){
            if(sessionStorage.getItem('userTel')==null){
                this.$router.push({
                    name:'Login'
                })
            }else{
                this.$router.push({
                    name:'MyCenter'
                })
            }
         },
         gocustomerchat(){  //去客服聊天
            if (sessionStorage.getItem('userTel')) {
                this.$router.push({name: 'CustomerChat'})
            }
         },
         publish(){
            if (sessionStorage.getItem('userTel')) {
                this.$router.push('ReleaseView')
            }else{
                this.$router.push({
                    name:'Login'
                })
            }
         },
         //退出登录的方法
         tuichu(){
            sessionStorage.removeItem('userTel')
            this.$router.go(0)
         },
         gozce(){
            this.$router.push({name:'Register'})
         },


        //  去拍卖首页
        jumpPaimai(){
            this.$router.push("AuctionHomepage")
        }
        },
        created(){
            document.title='闲呗交易网'
        }
    }

</script>

<style scoped>
    .allbox{
        background-color: rgb(234,232,235);
    }
    .navleft:hover{
        color: #e87085;
    }
    /* 轮播 */
    .fenleilbbox{
        width: 1170px;
        height: 486px;
        margin-top: 20px;
        background-color: white;
        margin: 0 auto;
        border-radius: 9px;
        display: flex;
    }
    .allfenleibox{
        background-color: #F7F9FA;
        height: 400px;
        width: 300px;
        border-radius: 6px;
    }
    .allfenleibox li{
        display: flex;
    }
    .fenxqing{
        margin-left: 10px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 16px;
        line-height: 54px;
    }
    .hove1:hover{
        color: yellowgreen;
    }
    .lunbobox{
        margin: 0 auto;
        width: 730px;
        height:400px;
        margin-top: 4px;
        border-radius: 10px;
    }
    .jiange{
        margin: 31px;
    }
    .lunbobox img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
        margin-top: 4px;
    }
    .rightbox{
        height: 100%;
        width: 33px;
        background-color:rgb(38,38,38);
        z-index: 2;
        float: right;
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: column ;
        justify-content: space-around;
    }
    .navleft{
        color: white;
        font-size: 13px;
        text-align: center;
        cursor:pointer;
    }
    .navleft a{
        color: white;
    }
    .fenleibox{
        height: 38px;
        line-height: 38px;
        width: 1170px;
        margin: 0 auto;
        display: flex;
        color: #333;
        background-color: white;
        border-radius: 6px;
        font-size: 17px;
        color: #777;
        font-weight: bolder;
        box-shadow: 1px 1px 2px #888888;
        margin-bottom: 2px;
    }
    .rightfenleibox{
        width: 100%;
        height: 40px;
        border-radius: 12px;
        background-color: #F7F9FA;
    }
    .rightfenleibox ul{
        display: flex;
        justify-content: space-around;
    }
    .rightfenleibox ul li{
        margin-left: 20px;
        line-height: 40px;
        font-size: 23px;
        cursor: pointer;
    }

    .rightfenleibox ul li:nth-child(1){
        color: yellowgreen;
    }
    .rightfenleibox ul li:nth-child(2){
        color: cadetblue;
    }
    .rightfenleibox ul li:hover{
        color: red;
    }
    .fenleiindex{
        margin-left: 58px;
        cursor: pointer;
    }
    .fenleiindex:hover{
        color: yellowgreen;
    }
    .classlor{
        color: cadetblue;
    }
    /* 活动区 */
    .huodongbox{
        width: 1000px;
        height: 160px;
        /* border: 1px solid sandybrown; */
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
        background-color: beige;
        border-radius: 6px;
    }
    .huodongleftbox{
        width: 325px;
        height: 130px;
        margin-top: 15px;
        background-image: url(../static/imgs/home.webp);
        background-size:100% 100%;
        font-size: 44px;
        color: #97d120;
        border-radius: 6px;
        text-align: center;
    }
    .huodongleftbox span{
        line-height: 129px;
    }
    .huodongrightbox span{
        line-height: 129px;
    }
    .huodongrightbox{
        width: 325px;
        height: 130px;
        margin-top: 15px;
        background-image: url(../static/imgs/home.webp);
        background-size:100% 100%;
        font-size: 44px;
        color: #e87085;
        border-radius: 6px;
        text-align: center;
        
    }
/* 推荐区 */
.tuijianbox{
    background-color: white;
    width: 1170px;
    /* height: 300px; */
    margin: 0 auto;
}
.headertjpc{
    height: 38px;
    padding: 15px 0;
    margin-top: 0;
}
.headertjtitle{
    text-align: center;
    color: #333;
    font-size: 26px;
    font-weight: bold;
}
.headertjtitle a{
    font-size: 16px;
    margin-top: 30px;
}

/* 商品块代码 */
.left4{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    overflow: hidden;
}
.left4>div{
    margin-top: 11px;
    width: 21%;
    height: 353px;
    transition: all 0.5s;  /* 动画过渡效果 */
    overflow: hidden;
    border: 1px solid transparent;
    background-color: rgb(243,244,245);
    border-radius: 9px;
    margin-left: 37px;
    margin-bottom: 13px;
}
/* 悬停效果 */
.left4>div:hover{
     border: 1px solid yellowgreen;
}
.left4>div>img{
    width: 99%;
    height: 60%;  
}

.left4>div>img:hover{
    height: 60%;
    transform: translate(0, -10px);
}
.imgbox{
    margin: 0 auto;
    width: 700px;
    height: 180px;
    margin-top: 20px;
}
.imgbox img{
    text-align: center;
}
/* 右边导航栏 */
#tool{
	width: 50px;
	height: 400px;
	position: fixed;
	top: 200px;
	right: 10px;
}
.btn a{
    color: black;
}
#tool span{
	font-size: 32px;
	color: yellowgreen;
	width: 50px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	position: absolute;
	top: -28px;
	right: 0;
}

#tool div{
	height: 400px;
	border-radius: 8px;
	overflow: hidden;
}


#tool a{
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	background: #fff;
	word-break: keep-all;
	padding-top: 6px;
	box-sizing: border-box;
	position: relative;

}
#tool a:after{
	content: '';
	border-bottom: 1px solid #efefef;
	width: 34px;
	position: absolute;
	left: 8px;
	bottom: 0;
}

#tool a.item7{
	line-height: 40px;
}

#tool a:hover, #tool a.active{
	background-image: linear-gradient(135deg,rgb(158, 205, 63),rgb(246,237,108));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff6f06', GradientType=1);
	color: #fff;
	font-weight: bold;
}
#tool a:hover:after, #tool a.active:after{
	border: none;
}
.huodongtitle{
    font-size: 26px;
    color: yellowgreen;
    margin-top: 10px;
    margin-left: 106px;
}
.huodongtitle a{
    color: black;
}
.huodongtitle a:nth-child(2){
    font-size: 16px;
    margin-left: 592px;
}
.feneybox{
    margin-top: 30px;
    text-align: center;
    /* border: 1px solid red; */
    width: 520px;
    margin: 27px auto;
}

.miaosubutton{
    cursor: pointer;
}

.mylogingo:hover{
    color: yellowgreen;
}
/* 尾部 */
.endxx {
  width: 1210px;
  height: 144px;
  margin: 0 auto;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
}
.endwz li:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
}
.el-step__title {
  width: 200px !important;
}
.abc {
  width: 600px;
}
.textRed {
  background-image: url(../assets/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png);
}
.text1{
  display: inline-block;
    width: 131px;
    position: relative;
    margin-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    top: -39px;
    left: -4px;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color:#888;
    color: #fff;
  }
 </style>  